<template>
  <div class="box">
    <div class="input_area">
      <el-input placeholder="请输入设备名称" :id="search_id" v-model="input" size="mini" class="input_item" />
      <img src="../../assets/input.png" alt="" class="img_logo" />
      <span class="el-icon-search search" @click="searchMap"></span>
    </div>
    <div class="select_area">
      <el-cascader :options="options" size="mini" placeholder="选择地域查询" :show-all-levels="false" :props="cityProps"
        clearable v-model="cityVal" @change="selectCity"></el-cascader>
    </div>
    <div class="date_area">
      <el-select v-model="themeValue" placeholder="请选择地图主题" size="mini" @change="changeTheme">
        <el-option v-for="item in themeOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import cityRegionData from "../../assets/area"
import cityJson from "../../assets/city.json";
export default {
  name: "search",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      search_id: "searchId",
      input: "",
      options: cityRegionData,
      cityProps: {
        children: "children",
        label: "business_name",
        value: "business_name",
        checkStrictly: true
      },
      cityVal: "",
      themeOptions: [
        { label: "标准", value: "normal" },
        { label: "幻影黑", value: "dark" },
        { label: "月光银", value: "light" },
        { label: "远山黛", value: "whitesmoke" },
        { label: "草色青", value: "fresh" },
        { label: "雅士灰", value: "grey" },
        { label: "涂鸦", value: "graffiti" },
        { label: "马卡龙", value: "macaron" },
        { label: "靛青蓝", value: "blue" },
        { label: "极夜蓝", value: "darkblue" },
        { label: "酱籽", value: "wine" },
      ],
      themeValue: ""
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.sendId();
  },
  methods: {
    sendId() {
      this.$emit("share_id", this.search_id);
    },
    searchMap() {
      console.log(this.input,'ssss');
      if (!this.input) {
        this.$emit("input_val", []);
        return
      }
      let val = cityJson.find(item => item.equipName === this.input)
      if (val) {
        this.$emit("input_val", val.dot);
        return
      }

      this.$message.warning("未查询到该设备,请输入正确的设备名称");
    },
    selectCity() {
      this.$emit("select_val", this.cityVal);
    },
    changeTheme(val) {
      this.$emit("change_theme", val);
    }

  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;

  .input_area {
    position: relative;
    width: 170px;
    height: 50px;
    display: flex;
    align-items: center;

    .input_item {
      width: 100%;

      /deep/ .el-input__inner {
        padding-left: 30px !important;
      }
    }

    .img_logo {
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    span {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: #ccc;
      cursor: pointer;
    }
  }

  .select_area {
    width: 150px;
    display: flex;
    align-items: center;
    height: 50px;
    margin-left: 10px;
  }

  .date_area {
    width: 150px;
    display: flex;
    align-items: center;
    height: 50px;
    margin-left: 10px;
  }
}
</style>